<!--  -->
<template>
  <div>
    <van-nav-bar 
      title="修改呢称"  
      right-text="完成"
      left-text="取消"
      @click-left="$emit('close')"
      @click-right="onConfirm"
    />

    <div class="name-field-wrap"> 
    <van-field
      v-model="localName"
      rows="2"
      autosize  
      type="textarea"
      maxlength="7"
      placeholder="请输入呢称"
      show-word-limit
    />
    </div>
  </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'
export default {
  name:'UpateName',
  components: {},
  props:{
    value:{
      type:String,
      require:true
    }
  },
  data () {
  return {
      localName:this.value
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
   async onConfirm(){

    
     this.$toast.loading({
       message:'保存中',
       forbidClick:true  //禁止背景点击
     })

     try {
       const {data}=await updateUserProfile({
       name:this.localName
     })
      this.$toast.success('保存成功')
      // this.$emit('update-name',this.localName)
      this.$emit('input',this.localName)
     //更新成功->修改父组件->关闭弹出层
     this.$emit('close')
       
     } catch (error) {
         if(error&&error.response&&error.response.status===409){
            this.$toast.fail('呢称已存在')
         }
     }
     
    }
  }
}

</script>
<style lang='less' scoped>
.name-field-wrap{
  padding: 10px;
}
</style>